<template>
  <div class="my-container">
    <!-- 1 个人信息展示 -->
    <div class="user-info">
      <!-- 登录时显示的信息 -->
      <div class="login" v-if="user">
        <!-- 上半部分 -->
        <van-cell class="base-info" title="单元格" value="内容" center :border="false">
          <van-image class="avatar" slot="icon" fit="cover" round width="66" height="66" :src="currentUser.photo" />
          <div class="name" slot="title">{{ currentUser.name }}</div>
          <van-button class="update-btn" size="small" round>编辑资料</van-button>
        </van-cell>
        <!-- 下半部分 -->
        <van-grid class="data-info" :border="false">
          <van-grid-item class="data-item" icon="photo-o" text="头条">
            <span slot="icon">{{ currentUser.art_count }}</span>
          </van-grid-item>
          <van-grid-item class="data-item" icon="photo-o" text="关注">
            <span slot="icon">{{ currentUser.follow_count }}</span>
          </van-grid-item>
          <van-grid-item class="data-item" icon="photo-o" text="粉丝">
            <span slot="icon">{{ currentUser.fans_count }}</span>
          </van-grid-item>
          <van-grid-item class="data-item" icon="photo-o" text="点赞">
            <span slot="icon">{{ currentUser.like_count }}</span>
          </van-grid-item>
        </van-grid>
      </div>
      <!-- 未登录时显示的头像 -->
      <div v-else class="not-login">
        <div class="box">
          <i class="icon icon-weidenglutouxiang" @click="$router.push('/login')"></i>
        </div>
        <span>登录 / 注冊</span>
      </div>
    </div>
    <!-- 2 收藏和历史 -->
    <van-grid class="user-collection-history" :column-num="2">
      <van-grid-item class="nav-item" icon-prefix="icon" icon="shoucang" text="收藏" />
      <van-grid-item class="nav-item" icon-prefix="icon" icon="lishi" text="历史" />
    </van-grid>
    <!-- 3 两个小功能 -->
    <div class="function">
      <van-cell class="toast" title="消息通知" is-link to="" />
      <van-cell title="小智同学" is-link to="" />
    </div>
    <!-- 4 退出登录 -->
    <van-cell v-if="user" class="outLogin" title="退出登录" @click="onLogout" />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getCurrentUser } from '@/api/user'

export default {
  name: 'myIndex',
  components: {},
  data () {
    return {
      currentUser: {}
    }
  },
  // 计算属性
  computed: {
    ...mapState(['user'])
  },
  // 监控data中的数据变化
  watch: {},
  methods: {
    // 【1】点击退出
    onLogout () {
      // 1 提示用户是否确认退出
      //   使用vant组件携带的 dialog 弹出框
      this.$dialog.confirm({
        title: '退出提示',
        message: '确认退出吗?'
      })
        .then(() => {
          // 2 确认退出
          //   清除vuex中的user数据,本地存储的数据也变为null
          this.$store.commit('setUser', null)
        })
      // 不需要退出，注释掉即可
      // .catch(() => {
      //   // on cancel
      // })
    },
    // 【2】获取登录用户信息
    async loadCurrentUser () {
      const { data } = await getCurrentUser()
      this.currentUser = data.data
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    // 一般不将方法体写在声明周期中
    this.loadCurrentUser()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () { },
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style scoped lang='less'>
.my-container {
  // 1 个人信息展示
  .user-info {
    background-image: linear-gradient(45deg, #9fbaa8, #3135);
    // 登录状态
    .login {
      // 上半部分
      .base-info {
        background-color: unset;
        height: 115px;
        box-sizing: border-box;
        padding-top: 38px;
        padding-bottom: 11px;
        .avatar {
          box-sizing: border-box;
          border: 1px solid #fff;
          margin-right: 11px;
        }
        .name {
          color: #fff;
          font-size: 15px;
        }
        .update-btn {
          height: 16px;
          font-size: 10px;
          color: #666;
        }
      }
      // 下半部分
      .data-info {
        .data-item {
          height: 65px;
          color: #fff;
          font-size: 18px;
          /deep/ .van-grid-item__text {
            color: #fff;
            font-size: 11px;
          }
        }
        /deep/ .van-grid-item__content {
          background-color: unset;
        }
      }
    }
    // 未登录状态
    .not-login {
      height: 180px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .box {
        width: 66px;
        height: 66px;
        border-radius: 50%;
        background-color: #fff;
        text-align: center;
        line-height: 60px;
        .icon {
          font-size: 32px;
          color: #9fbaa8;
        }
      }
      span {
        margin-top: 5px;
        font-size: 14px;
        color: #fff;
      }
    }
  }
  // 2 收藏和历史
  /deep/ .user-collection-history {
    .nav-item {
      height: 70px;
      .icon {
        font-size: 22px;
      }
      .icon-shoucang {
        color: #eb5253;
      }
      .icon-lishi {
        color: #ff9d1d;
      }
      .van-grid-item__text {
        font-size: 14px;
        color: #333;
      }
    }
  }
  // 3 两个小功能
  .function {
    .toast {
      margin-top: 4px;
    }
  }
  // 4 退出登录
  .outLogin {
    text-align: center;
    color: #d86262;
    margin-top: 4px;
  }
}
</style>
